<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF转Word局域网转换器</title>
    <!-- 使用本地Bootstrap文件替代CDN链接 -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> -->
    <!-- 请下载Bootstrap文件到static/css/bootstrap/目录下 -->
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="container mt-5 mb-5">
        <header class="text-center mb-8">
            <h1 class="display-4 mb-2"><i class="fas fa-file-pdf text-danger me-2"></i>PDF转Word转换器</h1>
            <p class="text-muted">局域网内安全高效的文档格式转换工具</p>
        </header>

        <main class="max-w-3xl mx-auto">
            <!-- 上传区域 -->
            <div class="card mb-6 shadow-lg">
                <div class="card-body p-6">
                    <div id="drop-area" class="border-2 border-dashed rounded-lg p-8 text-center hover:border-primary transition-colors duration-300">
                        <i class="fas fa-cloud-upload-alt text-5xl text-muted mb-4"></i>
                        <h3 class="h5 mb-2">拖放PDF文件到此处或</h3>
                        <label for="file-input" class="btn btn-primary mb-4">
                            <i class="fas fa-file-pdf me-2"></i>选择PDF文件
                        </label>
                        <input type="file" id="file-input" class="d-none" accept=".pdf">
                        <p class="text-sm text-muted"><i class="fas fa-info-circle me-1"></i> 支持单个PDF文件，最大500MB</p>
                    </div>

                    <!-- 文件信息 -->
                    <div id="file-info" class="mt-6 hidden">
                        <div class="d-flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                            <div class="d-flex items-center">
                                <i class="fas fa-file-pdf text-danger me-3"></i>
                                <div>
                                    <p id="file-name" class="font-medium"></p>
                                    <p id="file-size" class="text-sm text-muted"></p>
                                </div>
                            </div>
                            <button id="remove-file" class="text-danger hover:text-red-700">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>

                        <!-- 上传进度 -->
                        <div id="upload-progress" class="mt-4 hidden">
                            <div class="d-flex justify-between mb-1">
                                <span class="text-sm font-medium">上传中...</span>
                                <span id="upload-percentage" class="text-sm font-medium">0%</span>
                            </div>
                            <div class="progress">
                                <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 0%"></div>
                            </div>
                        </div>

                        <!-- 转换按钮 -->
                        <button id="convert-btn" class="w-100 mt-6 btn btn-success disabled">
                            <i class="fas fa-exchange-alt me-2"></i>开始转换
                        </button>
                    </div>
                </div>
            </div>

            <!-- 转换状态 -->
            <div id="conversion-status" class="card mb-6 shadow-lg hidden">
                <div class="card-body p-6">
                    <h3 class="h5 mb-4"><i class="fas fa-spinner fa-spin text-primary me-2"></i>转换中...</h3>
                    <div class="d-flex justify-between mb-1">
                        <span class="text-sm font-medium">处理进度</span>
                        <span id="conversion-percentage" class="text-sm font-medium">0%</span>
                    </div>
                    <div class="progress mb-4">
                        <div id="conversion-bar" class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 0%"></div>
                    </div>
                    <p id="status-message" class="text-sm text-muted text-center"></p>
                </div>
            </div>

            <!-- 转换结果 -->
            <div id="conversion-result" class="card mb-6 shadow-lg hidden">
                <div class="card-body p-6 text-center">
                    <div id="success-message" class="hidden">
                        <div class="text-success mb-4">
                            <i class="fas fa-check-circle text-5xl"></i>
                        </div>
                        <h3 class="h5 mb-2">转换成功!</h3>
                        <p class="text-muted mb-4">您的PDF文件已成功转换为Word文档</p>
                        <button id="download-btn" class="btn btn-success mb-2">
                            <i class="fas fa-download me-2"></i>下载Word文件
                        </button>
                        <p id="download-hint" class="text-sm text-muted hidden mt-2">下载完成后，文件将自动从服务器删除</p>
                    </div>

                    <div id="error-message" class="hidden">
                        <div class="text-danger mb-4">
                            <i class="fas fa-exclamation-circle text-5xl"></i>
                        </div>
                        <h3 class="h5 mb-2">转换失败</h3>
                        <p id="error-details" class="text-muted mb-4"></p>
                        <button id="retry-btn" class="btn btn-primary">
                            <i class="fas fa-redo me-2"></i>重试
                        </button>
                    </div>
                </div>
            </div>
        </main>

        <footer class="text-center text-muted mt-10 pt-4 border-t">
            <p>PDF转Word局域网工具 &copy; 2025 | <a href="#" class="text-primary">使用帮助</a></p>
        </footer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/main.js"></script>
</body>
</html>